<!--
 * @Description: 查看平台补贴明细
 * @Author: liyujie
 * @Date: 2021/05/10
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/10
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="查看平台补贴明细"
            :visible.sync="dialogVisible"
            width="680px"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <div
                class="dialog-content"
                v-loading="loading"
            >
                <div class="header">
                    <div class="subsidy-money">平台补贴预算：<span style="color: #2FBDB3">￥{{ statistics_data.money }}</span></div>
                    <div class="subsidy-money">平台累计已补贴：<span style="color: #F79038">￥{{ (statistics_data.used_money + Number(statistics_data.used_money_base)).toFixed(2) }}（含历史补贴{{ statistics_data.used_money_base }}元）</span></div>
                </div>
                <div class="date-view">
                    <div class="text">查看日期</div>
                    <el-select
                        v-model="filterData.type"
                        size="medium"
                        style="width: 152px"
                        @change="handleDateChange"
                    >
                        <el-option
                            label="全部"
                            :value="1"
                        />
                        <el-option
                            label="近7天"
                            :value="7"
                        />
                        <el-option
                            label="近30天"
                            :value="30"
                        />
                        <el-option
                            label="自定义"
                            :value="99"
                        />
                    </el-select>
                    <el-date-picker
                        v-model="dateTimeRange"
                        v-if="filterData.type === 99"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        size="medium"
                        :clearable="false"
                        style="width: 360px;margin-left: 12px"
                        value-format="timestamp"
                    />
                    <div
                        class="time"
                        :class="filterData.type === 99 ? 'wrap' : ''"
                        v-if="filterData.type === 1"
                    >
                        统计截止时间：{{ filterData.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </div>
                    <div
                        class="time"
                        :class="filterData.type === 99 ? 'wrap' : ''"
                        v-else
                    >
                        统计时间：{{ filterData.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} - {{ filterData.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </div>
                </div>
                <el-table
                    :data="tableData"
                    ref="table"
                    :cell-style="{height: '46px'}"
                    :row-class-name="tableRowClassName"
                    @row-click="handleRowClick"
                >
                    <el-table-column width="40"/>
                    <el-table-column
                        label="补贴类型"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.type_name }}
                            <i
                                :class="scope.row.flag ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
                                v-if="scope.$index < 2"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="平台已补贴金额(元)"
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.used_money ? scope.row.used_money : '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="预算上限(元)"
                        align="center"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.is_enabled === 0 ? '未设置' : scope.row.money }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        type="expand"
                        width="1"
                    >
                        <template slot-scope="scope">
                            <div
                                class="post-view"
                                v-if="scope.row.list.length"
                            >
                                <div
                                    class="post-item"
                                    v-for="item in scope.row.list"
                                    :key="item.phaadmin_position_no"
                                >
                                    <div class="post-item-value">
                                        {{ item.phaadmin_position_name }}
                                        <!--<span
                                            style="color: #F95B56"
                                            v-if="item.is_enabled === -1"
                                        >(岗位已移除)</span>-->
                                    </div>
                                    <div class="post-item-value center">{{ item.total_used_money }}</div>
                                    <div class="post-item-value">{{ item.money ? item.money : '未设置' }}</div>
                                </div>
                            </div>
                            <div
                                class="post-view empty"
                                v-else
                            >
                                暂无岗位数据
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: "SubsidyDetailDialog",
    data() {
        return {
            dialogVisible: false,
            filterData: {
                type: 1,
                shop_no: '',
                start_time: '',
                end_time: ''
            },
            statistics_data: {
                money: 0,
                used_money: 0,
                used_money_base: 0
            },
            dateTimeRange: [],
            tableData: [],
            loading: false
        };
    },
    watch: {
        dateTimeRange(value) {
            this.filterData.start_time = value ? value[0] / 1000 : '';
            this.filterData.end_time = value ? value[1] / 1000 : '';
            this.getTableData(1);
        }
    },
    computed: {},

    methods: {
        /**
         * 显示弹窗
         */
        show(shop_no) {
            this.filterData.shop_no = shop_no;
            this.dialogVisible = true;
            this.filterData.end_time = Number(this.$moment().endOf('day').format("X"));
            this.getTableData();
        },

        /**
         * 请求列表数据
         */
        getTableData() {
            this.loading = true;
            this.$post('/student/finance_control_shop%5Cget_shop_used_money_statistic', {...this.filterData}, res => {
                if (res.code === 1) {
                    let data = res.data;
                    let result = new Array(7);

                    result[0] = {type_name: '平台优惠券', money: data.coupon_money, used_money: data.coupon_used_money, list: data.coupon_list, flag: false};
                    result[1] = {type_name: '平台红包', money: data.red_packet_money, used_money: data.red_packet_used_money, list: data.red_packet_list, flag: false};
                    result[2] = {type_name: '一卡通折扣商品', money: data.vip_goods_money, used_money: data.vip_goods_used_money};
                    result[3] = {type_name: '一卡通1分权商品', money: data.vip_free_money, used_money: data.vip_free_used_money};
                    result[4] = {type_name: '新人专区', money: data.welfare_money, used_money: data.welfare_used_money};
                    result[5] = {type_name: '社群专享价活动', money: data.tool_group_goods_money, used_money: data.tool_group_goods_used_money};
                    result[6] = {type_name: 'APP新人立减', money: data.new_user_discount_money, used_money: data.new_user_discount_used_money};

                    this.tableData = result;
                    this.statistics_data = {
                        money: data.money,
                        used_money: data.used_money,
                        used_money_base: data.used_money_base
                    };
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.loading = false;
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '/';
            return val;
        },

        /**
         * 更改日期
         * @param val - 统计天数
         */
        handleDateChange(val) {
            if(val !== 99) {
                this.filterData.end_time = Number(this.$moment().endOf('day').format("X"));
                this.filterData.start_time = Number(this.$moment().subtract(val, 'days').startOf('day').format("X"));
            }
            if(val === 1) {
                this.filterData.start_time = 0;
            }
            if(val === 99) {
                this.filterData.end_time = Number(this.$moment().endOf('day').format("X"));
                this.filterData.start_time = Number(this.$moment().startOf('day').format("X"));
            }
            this.dateTimeRange = [this.filterData.start_time * 1000, this.filterData.end_time * 1000];
        },

        /**
         * 处理可点击行样式
         * @param row
         * @param rowIndex
         * @returns {string}
         */
        tableRowClassName({row, rowIndex}) {
            row.$index = rowIndex;
            if(rowIndex < 2) {
                return 'cursor';
            }
        },

        /**
         * 展开行
         * @param row
         */
        handleRowClick(row) {
            if(row.$index < 2) {
                this.$refs.table.toggleRowExpansion(row);
                this.$set(row, "flag", !row.flag);
            }
        },

        /**
         * 弹窗关闭
         */
        handleClose() {
            this.filterData = {
                type: 1,
                shop_no: '',
                start_time: '',
                end_time: ''
            };
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .dialog-content {
        /deep/ .el-table {
            border: 1px solid #eee;
            border-radius: 4px;
            th {
                background: #f2f2f2!important;
            }
            td {
                background: #FBFBFB!important;
            }
            .el-table__row.cursor {
                cursor: pointer;
            }

            .post-view {
                padding: 12px 0 0;
                .post-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    justify-content: space-between;
                    margin-bottom: 12px;;
                    &-value {
                        flex: 1;
                        text-align: center;
                        &.center {
                            padding-left: 36px;
                        }
                    }
                }
                &.empty {
                    text-align: center;
                    height: 48px;
                    margin-top: 12px;
                    color: #909399;
                }
            }
        }
        .header {
            display: flex;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            .subsidy-money {
                color: #333333;
                margin-right: 12px;
            }
        }
        .date-view {
            display: flex;
            align-items: center;
            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 14px;
            font-weight: 400;
            margin: 20px 0 24px;
            flex-wrap: wrap;
            .text {
                color: #333333;
                margin-right: 12px;
            }
            .time {
                color: #999999;
                margin-left: 12px;
            }
            .wrap {
                margin-left: 0;
                margin-top: 12px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
</style>
